<template>
    <el-container>
        <el-header style="text-align: left; font-size: 12px">
                    <div  class="block" >
                        <span>国家城市:{{pickedCoun.value+' '+pickedCity.value}}</span>
                        <el-date-picker
                                v-model="dateValue"
                                type="daterange"
                                align="right"
                                unlink-panels
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                :shortcuts="shortcuts">
                        </el-date-picker>
                        <el-button :disabled="searchable" @click="pullData()" size="small"  type="primary" icon="el-icon-search">查询</el-button>
                    </div>

        </el-header>

        <el-main>
            <div id="myTable" style="width: 600px;height: 400px;"></div>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        prop="date"
                        label="日期"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="total"
                        label="当日总人数"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="nums"
                        label="当日新增">
                </el-table-column>
            </el-table>
        </el-main>
    </el-container>


</template>

<script>
    import {instance as axios} from '../config/globalModel'
    import * as echarts from 'echarts';
    export default {
        data() {
            return {
                shortcuts: [{
                    text: '最近一周',
                    value: (() => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                        return [start, end]
                    })(),
                }, {
                    text: '最近一个月',
                    value: (() => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                        return [start, end]
                    })(),
                }, {
                    text: '最近三个月',
                    value: (() => {
                        const end = new Date()
                        const start = new Date()
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                        return [start, end]
                    })(),
                }],
                dateValue: null,
                table: null,
                tableOption:{
                    title: {
                        text: '疫情人数折线图',
                    },
                    tooltip: {},
                    legend: {
                        data: ['每日总数','每日新增']
                    },
                    xAxis: {
                        type: 'category',
                        data: [],
                        name:"月/日/年"
                    },
                    yAxis: {name:"人数"},
                    series: [
                        {
                            name: '每日总数',
                            type: 'line',
                            data: []
                        },
                        {
                            name: '每日新增',
                            type: 'line',
                            data: []
                        }
                    ],

                    "toolbox": {
                        "show": true,
                        "feature": {

                            "dataView": {
                                "readOnly": false
                            },

                            "saveAsImage": {}
                        }
                    }



                },

                tableData: []

            };
        },
        inject: ['pickedCoun','pickedCity'],
        methods: {
            myEcharts(){
                this.table.setOption(this.tableOption)
            },
            pullData() {

                axios.post(`/${this.pickedCoun.value}/${this.pickedCity.value}`,{
                    startDate:this.dateValue!=null?this.dateValue[0]:null,
                    endDate:this.dateValue!=null?this.dateValue[1]:null
                })
                    .then(res=>{

                        console.log(res.data.data)
                        this.tableOption.xAxis.data=res.data.data[0].date;
                        this.tableOption.series[0].data=res.data.data[0].total;
                        this.tableOption.series[1].data=res.data.data[0].nums;

                        for (let i = 1; i < res.data.data.length; i++) {
                            for (let j = 1; j < res.data.data[i].length; j++) {
                                this.tableOption.series[0][j] += res.data.data[i].total[j]
                                this.tableOption.series[1][j] += res.data.data[i].nums[j]
                            }
                        }
                        console.log(this.tableOption)
                        this.tableData=[]
                        let temp=[]
                        for (let i = 0; i < this.tableOption.xAxis.data.length; i++) {
                            temp.push({
                                date:this.tableOption.xAxis.data[i],
                                total:this.tableOption.series[0].data[i],
                                nums:this.tableOption.series[1].data[i]
                            })
                        }
                        this.tableData=temp
                        this.table.setOption(this.tableOption)
                    })
            }
        },
        setup(){

        },
        created() {
            // this.table=null;
            // console.log(document.getElementById("myTable"))
        },
        mounted() {
            this.table=echarts.init(document.getElementById('myTable'));
            this.myEcharts();


        },
        watch:{

        },
        computed: {
            searchable() {
                // this.dateValue==null || this.pickedCity.value==''
                return  this.pickedCoun.value==''
            }
        },
    };
</script>

<style scoped>
    .el-header {
        background-color: #B3C0D1;
        color: #333;
        line-height: 60px;
    }
</style>